/*
react 用于构建用户界面(用来写动态页面的)js库(流行框架)

需要的两个包: 
react.js
react-dom.js
react-native.js

版本号: 

16.8和17
import ReactDOM from 'react-dom'
ReactDOM.render(虚拟dom, document.getElementById('root))

18
import ReactDOM from 'react-dom/client'
ReactDOM.createRoot(document.getElementById('root)).render(虚拟dom)

JSX(javascript xml) 
在js中写标签

JSX的注意点: 

1. 必须要有一个根标签
2. 有些属性名和html中写法不同. 比如说className 
3. 在JSX中写标签,要符合html标准

利用插值表达式插入数据
{}

两个位置: 1. 标签的子节点(为了渲染) 2. 写在属性的位置(为了控制属性的值)

渲染的注意点: 1. 不要渲染布尔值,null,undefined什么都不展示 2. 不要直接渲染普通对象,会报错. 3. 不要直接渲染函数,会警告 4. 渲染数组,则会将数组中每一个元素当做一个子节点渲染

条件判断: 在插值表达式中写三元或与来决定哪些结构要渲染

列表渲染: 根据已有的数组,调用map方法,得到一个存放了虚拟dom的新数组
注意: 为了性能要求,列表渲染时应该给最外层的标签添加key属性,key的值不能重复

绑定事件: <div onClick={function(){}}></div>
注意: 我们接受的事件对象,叫做合成事件,是对真正的事件对象的包装 
this指向undefined

行内样式
<div style={{属性: '值'}}></div>
1. 属性的值都要应该是字符串
2. 如果单位是px,则单位可以忽略,直接写数字
3. 如果属性有-.要写成小驼峰

脚手架
create-react-app 

public 至少有一个index.html 
src 至少有一个index.js 

*/
